<template>
   <div>
      <el-table :data="tableData.listdata"
         style="width: 100%">
         <el-table-column prop="id" label="编号" width="auto" />
         <el-table-column prop="title" label="楼盘" width="auto" />
         <el-table-column prop="type" label="住宅类型" width="auto" />
         <el-table-column prop="hometype" label="房源户型" width="auto" />
         <el-table-column prop="name" label="户主姓名" width="auto" />
         <el-table-column prop="num" label="门牌号" width="auto" />

         <el-table-column>
            <template #header>
               <el-input v-model="search" size="small" placeholder="请输入查询的门牌号：" @blur="serchLink" />
               <el-icon @change="serchLink">
                  <Search />
               </el-icon>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div>
         <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.listdata.length"
            :current-page="currentPage4" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

   </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import Link from "../../../api/Link.js";
import apiurl from "../../../api/url.js";
import { Search } from '@element-plus/icons-vue'

let search = ref("")

const currentPage4 = ref(1)//当前页数
const pageSize4 = ref(10)//每页显示条数
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
   pageSize4.value = val
}
const handleCurrentChange = (val: number) => {
   currentPage4.value = val
}

let tableData = reactive({
   listdata: []
})

let serchLink = () => {
   Link(apiurl.userlist, "get", {}, { num: search.value }).then((ok: any) => {
      console.log(ok)
      tableData.listdata = ok.data
   })
}

onMounted(() => {
   Link(apiurl.userlist).then((ok: any) => {
      console.log(ok)
      tableData.listdata = ok.data
      console.log(tableData.listdata);
      
   })
})


</script>

<style lang='scss'>
.cell {
   display: flex;
}

.el-icon {
   font-size: 25px;
   color: black;
}
</style>